<template>
	<div class="base-pieChart" :id="pieUuid"></div>
</template>
<script>
	import echarts from 'echarts'
	import uuidv1 from 'uuid/v1'

	export default {
		data() {
			return {
				myChart: {}, //生成的图表实例
				pieUuid: '', //唯一id'
				seriesValue: [
        			{
        				name: '状态1',
        				value: 1
        			},
        			{
        				name: '状态2',
        				value: 2
        			},
        			{
        				name: '状态3',
        				value: 3
        			},
        			{
        				name: '状态4',
        				value: 4
        			},
        			{
        				name: '状态5',
        				value: 5
        			}
        		]
			}
		},
		computed: {
			isShowTitle() {
				if(this.title) {
					return true
				} else {
					return false
				}
			}
		},
		props: {
            //String,Array,Number,Object,
            title: {
            	type: String,
            	default: ''
            },
            titleFontSize: {
            	type: Number,
            	default: 18
            },
            titlePadding: {
            	type: Array,
            	default() {
            		return [10,0,0,10]
            	}
            },
            trigger: { //触发类型，'item'图形触发，'axis'坐标轴触发，'none'什么都不触发
            	type: String,
            	default: 'item'
            },
            allColor: {
            	type: Array,
            	default() {
            		return ['#64cef6','#81bb54','#fdcf60','#1ecbb8','#cb1d36','#686de0','#aee7e8','#ff9776','#248ea9']
            	}
            },
            LegendData: {
            	type: Array,
            	default() {
            		return ['状态1','状态2','状态3','状态4','状态5']
            	}
            },
            LegendBottom: {
            	type: Number,
            	default: 10
            },
            LegendFontSize: {
            	type: Number,
            	default: 13
            },
            itemWidth: {
            	type: Number,
            	default: 13
            },
            itemHeight: {
            	type: Number,
            	default: 13
            },
            itemGap: {
            	type: Number,
            	default: 10
            },
            isShowLabel: {
                type: Boolean,
                default: false
            },
            SlabelPadding: {
            	type: Array,
            	default() {
            		return [0,0,0,0] 
            	}
            },
            seriesDatas: {
            	type: Array,
            	default() {
            		return []
            	}
            }
		},
        
		created() {
			this.pieUuid = uuidv1()
		},
		mounted() {
			this.initChart()
		},
		methods: {
			//刷新图表
			refreshChart() {
				setTimeout(() => {
					this.myChart.resize()
				},10)
			},
			//生成饼图
            initChart() {
                this.myChart = echarts.init(document.getElementById(this.pieUuid))
                this.setOption()
            },
            setOption() {
            	let title = {
            		title: {
            		    show: this.isShowTitle,
            		    text: this.title,
            		    textStyle: {
            		        color: '#fff',
            		        fontSize: this.titleFontSize,
            		    },
            		    padding: this.titlePadding
            		}
            	}
            	let tooltip = {
            		tooltip: {
            		    padding: 10,
            		    backgroundColor: '#222',
            		    borderColor: '#777',
            		    borderWidth: 1,
            		    trigger: this.trigger,
            		    //formatter: "{a} <br/>{b}: {c} ({d}%)"
            		}
            	}
            	let color = {
            		color: this.allColor
            	}
            	let grid = {
            		grid: {
            		    containLabel: true,
            		}
            	}
            	let legend = {
            		legend: {
            		    data:this.LegendData,
            		    bottom: this.LegendBottom,
            		    textStyle: {
            		        color: '#000',
            		        fontSize: this.LegendFontSize,
            		    },
            		    itemWidth: this.itemWidth,
            		    itemHeight: this.itemHeight,
            		    itemGap: this.itemGap,
            		}
            	}
            	let seriesList = {
            		series: []
            	}
            	this.seriesDatas.forEach(item => {
            		let seriesName = item.seriesName || ''
            		let seriesRadius = item.seriesRadius || ['0','65%']
            		let seriesCenter = item.seriesCenter || ['50%','45%']
            		let isShowLabel = this.isShowLabel
            		let SlabelPadding = this.SlabelPadding
            		let textColor = item.textColor || '#000'
            		let SlabelFontSize = item.SlabelFontSize || 14
            		let isShowLabelLine = item.isShowLabelLine || false
            		let SlabelLineLength = item.SlabelLineLength || 20
            		let SlabelLineLength2 = item.SlabelLineLength2 || 20
            		let lineColor = item.lineColor || '#000'
            		let seriesValue = item.seriesValue || this.seriesValue

            		seriesList.series.push({
            			name: seriesName,
            			type:'pie',
            			radius: seriesRadius,
            			center: seriesCenter,
            			label: {
            			    normal: {
            			        show: isShowLabel,
            			        padding: SlabelPadding,
            			        textStyle: {
            			            color: textColor,
            			            fontSize: SlabelFontSize,
            			        }
            			    }
            			},
            			labelLine: {
            			    normal: {
            			        show: isShowLabelLine,
            			        length: SlabelLineLength,
            			        length2: SlabelLineLength2,
            			        lineStyle: {
            			            color: lineColor,
            			        }
            			    }
            			},
            			data: seriesValue
            		})
            	})

                this.myChart.setOption(Object.assign(title,tooltip,color,grid,legend,seriesList),true)
            }
		},
		watch: {
			seriesDatas: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
		    title: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    titleFontSize: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    titlePadding: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    trigger: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    allColor: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    LegendData: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    LegendBottom: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    LegendFontSize: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    itemWidth: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    itemHeight: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    itemGap: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		    SlabelPadding: {
		    	deep: true,
		    	handler(newValue) {
		    		this.initChart()
		    	}
		    },
		},
	}
</script>
<style>
	.base-pieChart {
		width: 100%;
		height: 100%;
	}
</style>